<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
*{
    margin: 0;
    padding: 0;
}
.item{
    width: 500px;height: 100px;
    background-color: skyblue;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.dice{
    width: 55px;height: 55px;
    background-color: white;
    border: slategray solid 1px; 
    display: flex;
}
.one,.two,.three,.four,.five,.six,.seven{
    width: 7px;height: 7px;
    background-color: black;
    border-radius: 50%;
}
.body1{
    justify-content: center;
    align-items: center;
}
.body2{ 
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.body3{
justify-content: space-between;
}
.three:last-child{
    align-self: flex-end;
}
.three:nth-child(2){
    align-self: center;
}
.body4{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center; 
}
.littlebody41,.littlebody42{
    width: 7px;height: 55px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;  
}

.body5{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.littlebody51,.littlebody52{
    width: 7px;height: 55px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;  
}

.body6{
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.littlebody61,.littlebody62{
    width: 7px;height: 55px;
    display: flex;
    flex-direction: column;
    justify-content: space-around; 
}

.body7{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.littlebody71,.littlebody73{
    width: 55px;height: 7px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.littlebody72{
    width: 55px;height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    </style>
</head>
<body>
    <div class="item">
        <div class="dice body1">
            <div class="one"></div>
        </div>
        <div class="dice body2">
            <div class="two"></div>
            <div class="two"></div>
        </div>
        <div class="dice body3">
            <div class="three"></div>
            <div class="three"></div>
            <div class="three"></div>
        </div>
        <div class="dice body4">
            <div class="littlebody41">
               <div class="four"></div>
               <div class="four"></div>
            </div>
            <div class="littlebody42">
                <div class="four"></div>
                <div class="four"></div>
            </div>
        </div>
        <div class="dice body5">
            <div class="littlebody51">
                <div class="five"></div>
            <div class="five"></div>
            </div>
            <div class="five"></div>
            <div class="littlebody52">
                <div class="five"></div>
            <div class="five"></div>
            </div>
          
        </div>
        <div class="dice body6">
            <div class="littlebody61">
            <div class="six"></div>
            <div class="six"></div>
            <div class="six"></div>
            </div>
            <div class="littlebody62">
            <div class="six"></div>
            <div class="six"></div>
            <div class="six"></div>
            </div>
        </div>
        <div class="dice body7">
            <div class="littlebody71">
            <div class="seven"></div>
            <div class="seven"></div>
            <div class="seven"></div>
            </div>
            <div class="littlebody72">
             <div class="seven"></div>
            </div>
            
            <div class="littlebody73">
                <div class="seven"></div>
                <div class="seven"></div>
                <div class="seven"></div>
            </div>
            
        </div>
    </div>
    
</body>
</html>